<template>
  <!-- 修改：移除title组件，使用custom-navbar -->
  <view class="custom-navbar">
    <view class="navbar-text">医院名称</view>
  </view>
  <view class="container" style="background-color: #EEF7FE;">
    <!-- 留出导航栏空间 -->
    <view :style="'height:' + navbarHeight + 'px'"></view>

    <!-- 背景 -->
    <view class="background">
      <view class="card">
        <view class="city">
          <view class="city-item">济源市仁新医院</view>
          <view class="city-card">电子就诊卡</view>
          <image style="height: 78px;width: 180px;" alt="背景图" src="/static/back.png"/>
        </view>
        <view class="inner">院内就诊ID号：1</view>
      </view>

      <view class="intruduce">
        <!-- 预约挂号 -->
        <view class="intruduce-item" @click="checkUserAndNavigate(look, '预约挂号')">
          <image alt="预约挂号图标" src="/static/home1.png" />
          <view class="show">预约挂号</view>
          <view class="look">实时查看医生情况</view>
        </view>
        <!-- 预约记录 -->
        <view class="intruduce-item" @click="checkUserAndNavigate(record, '预约记录')">
          <image alt="预约记录图标" src="/static/home2.png" />
          <view class="show">预约记录</view>
          <view class="look">快速查看预约情况</view>
        </view>
        <!-- 线上缴费 -->
        <view class="intruduce-item" @click="checkUserAndNavigate(pay, '线上缴费')">
          <image alt="线上缴费图标" src="/static/home3.png" />
          <view class="show">线上缴费</view>
          <view class="look">快速缴费不排队</view>
        </view>
      </view>
    </view>

    <view class="outpatient">
      <view class="doors">
        <view class="door-line"></view>
        <view class="door-font">
          <text>门诊</text>
        </view>
      </view>
      <view class="door-items">
        <view class="door-item" @click="add">
          <image alt="添加就诊人图标"  src="/static/home4.png"/>
          <view class="item-font">添加就诊人</view>
        </view>
        <view class="door-item" @click="checkUserAndNavigate(querys, '报告查询')">
          <image alt="报告查询图标"  src="/static/home5.png"/>
          <view class="item-font">报告查询</view>
        </view>
        <view class="door-item" @click="checkUserAndNavigate(paycode, '缴费记录')">
          <image alt="缴费记录图标"  src="/static/home6.png"/>
          <view class="item-font">缴费记录</view>
        </view>
      </view>
    </view>

    <!-- 住院 -->
    <view class="liveHouse">
      <view class="doors">
        <view class="door-line"></view>
        <view class="door-font">
          <text>住院</text>
        </view>
      </view>
      <view class="live-items">
        <view class="door-item" id="message" @click="checkUserAndNavigate(personMess, '住院人信息')">
          <image alt="住院人信息图标"  src="/static/home7.png"/>
          <view class="item-font">住院人信息</view>
        </view>
        <view class="door-item" id="day" @click="checkUserAndNavigate(datepay, '住院日清单')">
          <image alt="住院日清单图标"  src="/static/home8.png"/>
          <view class="item-font">住院日清单</view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom">
      <view class="bottom-item" @click="goto">
        <image alt="首页图标" src="/static/homeAfter.png"/>
        <text style="color: #00DACA;">首页</text>
      </view>
      <view class="bottom-item" @click="hospital">
        <image alt="医院信息图标" src="/static/message.png"/>
        <text>医院信息</text>
      </view>
      <view class="bottom-item" @click="family">
        <image alt="专家榜图标" src="/static/icon3.png" />
        <text>专家榜</text>
      </view>
      <view class="bottom-item" @click="can">
        <image alt="消息图标" src="/static/icon4.png"/>
        <text>消息</text>
      </view>
      <view class="bottom-item" @click="my">
        <image src="/static/mine.png" alt="我的图标" />
        <text>我的</text>
      </view>
    </view>

    <!-- 提示弹窗 -->
    <view v-if="showModal" class="modal-mask">
      <view class="modal-container">
        <view class="modal-title">提示</view>
        <view class="modal-content">请添加就诊人</view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="closeModal">取消</view>
          <view class="modal-btn confirm" @click="goToAddPatient">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { card } from '@/api/index'; // 引入就诊卡列表接口

const topHeight = ref(0);  // 用于存储动态计算的top高度
const navbarHeight = ref(0);
const showModal = ref(false);
const currentAction = ref(null);

onMounted(() => {
  // 获取设备信息
  const systemInfo = uni.getSystemInfoSync();
  
  // 默认导航栏高度为44px
  const defaultNavbarHeight = 50;
  
  // 获取刘海区域高度
  const safeAreaInsets = systemInfo.safeAreaInsets;
  
  // 计算最终导航栏高度
  navbarHeight.value = defaultNavbarHeight + (safeAreaInsets.top || 0);
});

// 检查用户信息并导航
const checkUserAndNavigate = async (action, actionName) => {
  try {
    // 显示加载提示
    uni.showLoading({
      title: '加载中...',
      mask: true
    });
    
    // 获取本地存储的用户信息
    const userData = uni.getStorageSync('user');
    
    if (!userData || !userData.data || !userData.data.id) {
      // 用户未登录或用户信息不完整
      uni.hideLoading();
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      return;
    }
    
    // 提取用户ID
    const userId = userData.data.id;
    
    // 请求就诊卡列表接口，带上user_id参数
    const res = await card({ user_id: userId });
    
    console.log('就诊卡列表接口响应:', res);
    
    // 隐藏加载提示
    uni.hideLoading();
    
    // 检查接口返回数据
    if (res.code === 1 && res.data && res.data.length > 0) {
      // 有就诊卡数据，执行对应操作
      action();
    } else {
      // 没有就诊卡数据，显示弹窗
      currentAction.value = action;
      showModal.value = true;
    }
  } catch (error) {
    console.error('获取就诊卡列表失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: '获取就诊卡信息失败，请重试',
      icon: 'none'
    });
  }
};

// 关闭弹窗
const closeModal = () => {
  showModal.value = false;
  currentAction.value = null;
};

// 前往添加就诊人页面
const goToAddPatient = () => {
  showModal.value = false;
  uni.navigateTo({
    url: '/pages/patient/patient'
  });
};

// 其他页面逻辑保持不变...
const look = () => {
  // 预约挂号
  uni.navigateTo({
    url: '/pages/list/list'
  });
};

const record = () => {
  // 预约记录
  uni.navigateTo({
    url: '/pages/logs/logs'
  });
};

const pay = () => {
  // 线上缴费
  uni.navigateTo({
    url: '/pages/payment/payment'
  });
};

const add = () => {
  // 添加就诊人页面跳转
  uni.navigateTo({
    url: '/pages/patient/patient'
  });
};

const querys = () => {
  // 报告查询
  uni.navigateTo({
    url: '/pages/report/report'
  });
};

const paycode = () => {
  // 缴费记录
  uni.navigateTo({
    url: '/pages/historyPayment/historyPayment'
  });
};

const personMess = () => {
  // 住院人信息
  uni.navigateTo({
    url: '/pages/inpatient/inpatient'
  });
};

const datepay = () => {
  // 住院日清单
  uni.navigateTo({
    url: '/pages/hospitalBill/hospitalBill'
  });
};

const goto = () => {
  // 首页
};

const hospital = () => {
  // 医院信息
  uni.redirectTo({
    url: '/pages/information/information'
  });
};

const family = () => {
  // 专家榜
  uni.redirectTo({
      url: '/pages/expert/expert'
  });
};

const can = () => {
  // 消息
};

const my = () => {
  // 我的
  uni.redirectTo({
      url: '/pages/personal/personal'
  });
};
</script>

<style scoped>
.container {
  background-color: aliceblue;
  height: 100vh;
}

/* 自定义导航栏样式 */
.custom-navbar {
 width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    font-size: 42rpx;
    font-weight: bold;
    position: fixed;
    top: 0;
    z-index: 10;
}

.navbar-text {
  color: white;  /* 自定义导航栏文字颜色 */
  font-size: 22px;
  font-weight: 600;
      padding-top: 60rpx;
}

/* 背景 */
.background {
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 25vh;
  position: relative; /* 调整为relative来避免重叠 */
  margin-bottom: 150px; /* 留出足够的空间给下方卡片 */
}
#message{
  margin-left: -28px;
}
#day{
  margin-left: -40px;
}
/* 第一张卡片 */
.card {
  width: 92%;
  height: 77px;
  background-color: white;
  margin-left: 4%;
  margin-top: 5px;
  border-radius: 10px;
  position: relative;
  z-index: 10;
}

.city {
  display: flex;
  margin-top: 8px;
  margin-left: 10px;
  justify-content: space-between;
}

.city-item {
  margin-top: 10px;
  color: #00a89b;
  font-weight: 500;
  font-size: 17px;
  width: 40%;
  white-space: nowrap;  /* 强制文本不换行 */
}

.city-card {
  color: #00a89b;
  border: 1px solid #00a89b;
  font-size: 14px;
  min-width: 80px;
  height: 22px;
  text-align: center;
  margin-left: 20px;
  margin-top: 10px; 
  line-height: 22px;
  z-index: 10;
  white-space: nowrap;
}

/* 院内就诊id号 */
.inner {
  margin-top: -45px;
  margin-left: 12px;
  font-size: 14px;
  color: #00a89b;
}

/* 预约挂号三个图标 */
.intruduce {
  margin-top: 10px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}

.intruduce-item {
  width: 30%;
  margin-left: 10px;
  margin-top: 15px;
  text-align: center;
}

.intruduce-item image {
  width: 39px;
  height: 43px;
}

.show {
  font-size: 15.5px;
  color: #323232;
}

.look {
  font-size: 14px;
  margin-top: 3px;
  color: #808080;
  white-space: nowrap;
}

/* 门诊 */
.outpatient {
  margin-top: -120px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.doors {
  display: flex;
  margin-top: 14px;
  margin-left: 15px;
}

.door-line {
  width: 2px;
  height: 18px;
  background-color: #00daca;
  margin-top: 12px;
}

.door-font {
  margin-left: 10px;
  font-size: 22px;
  margin-top: 5px;
  color: #4f4f4f;
  font-weight: 700;
}

.door-items {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

/* 住院 */
.liveHouse {
  margin-top: 10px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.live-items {
  display: flex;
  justify-content: flex-start; /* 修改为靠左排列 */
  margin-top: 10px;
  padding: 0 10px;
}

.door-item {
  text-align: center;
  width: 40%;
  margin-right: 20px; /* 添加右侧间距 */
}

.door-item image {
  width: 35px;
  height: 35px;
}

.item-font {
  font-size: 13px;
}

/* 底部导航栏 */
.bottom {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e6e6e6;
}

.bottom-item {
  text-align: center;
  font-size: 12px;
  color: #7d7d7d;
}

.bottom-item image {
  width: 30px;
  height: 30px;
  vertical-align: middle; /* 图片垂直居中 */
}

.bottom-item text {
  display: block;
  margin-top: 5px; /* 给文字留些空间 */
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 80%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-title {
  padding: 30rpx 20rpx;
  text-align: center;
  font-weight: bold;
  font-size: 36rpx;
}

.modal-content {
  padding: 0 20rpx 30rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.modal-btn {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 34rpx;
}

.cancel {
  color: #666;
  border-right: 1rpx solid #eee;
}

.confirm {
  color: #00DACA;
  font-weight: bold;
}
</style>  